<template>
  <!-- 首页 内容页面 -->
  <div class="music-body">
    <!-- 热门推荐组件 -->
    <HotCate>
      <!-- 作用域具名插槽 将热门推荐里的数据放进插槽里 -->
      <template slot="title" slot-scope="cates">
        <!-- 标题组件 作为插槽内容插入热门推荐组件 -->
        <SmTitle to="/cate" title="热门推荐" :cates="cates"></SmTitle>
      </template>
    </HotCate>

    <!-- 新歌推荐组件 -->
    <NewSong>
      <!-- 具名插槽 -->
      <template slot="title">
        <SmTitle
          to="/cate"
          :styles="{ paddingBottom: '0rem' }"
          title="新歌推荐"
        ></SmTitle>
      </template>
    </NewSong>

    <!-- 热门歌星组件 -->
    <MusicStar>
      <!-- 具名插槽 -->
      <template slot="title">
        <SmTitle to="/star" title="热门歌手"></SmTitle>
      </template>
    </MusicStar>

    <!-- 热门mv组件 -->
    <MusicMv>
      <!-- 具名插槽 -->
      <template slot="title">
        <SmTitle to="/cate" title="热门MV"></SmTitle>
      </template>
    </MusicMv>
  </div>
</template>

<script>
import MusicMv from "./MusicMv.vue";
import MusicStar from "./MusicStar.vue";
import NewSong from "./NewSong.vue";
import SmTitle from "../public/SmTitle.vue";
import HotCate from "./HotCate.vue";
export default {
  name: "MusicBody",
  components: { HotCate, SmTitle, NewSong, MusicStar, MusicMv },
};
</script>

<style lang="less" scoped>
.music-body {
  padding: 0.1rem 0.35rem;
  background: linear-gradient(to top, #243b55, #141e30);
}
</style>